<template>
  <uni-nav-bar title="加注订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <environment></environment>
  <!-- 订单信息 -->
  <view class="canState">
    <view class="canState_order">
      <view style="font-size: 32rpx">订单号</view>
      <view @click="copyText(orderAll.order_sn)">
        <text>复制</text>
        <text>{{ orderAll.order_sn }}</text>
      </view>
    </view>
    <view class="canState_text">
      <text>下单时间</text>
      <text>{{ orderAll.createtime }}</text>
    </view>
    <view class="canState_text" style="align-items: flex-start">
      <text>位置</text>
      <text style="width: 70%; text-align: right">{{ orderAll.address }}</text>
    </view>
   <!-- <view class="canState_text">
      <text>加注方式</text>
      <text>{{ orderAll.type == 'quota' ? '定额' : '定量' }}</text>
    </view> -->
    <view class="canState_text">
      <text>加注量</text>
      <text>{{ orderAll.amount }}公斤</text>
    </view>
    <!--   <view class="canState_orders">
            <view style="font-size: 32rpx; width: 20%">加注员</view>
            <view
              class="canState_ordera"
              @click="orderAll.store_mobile ? call(orderAll.store_mobile) : ''"
              style="justify-content: flex-end"
            >
              <text>{{orderAll.store_name}}</text>
              <u-icon
                name="phone"
                color="#2979ff"
                size="28"
                style="width: 18rpx; margin: 0px 10rpx 0px 20rpx"
                v-if="orderAll.store_mobile"
              ></u-icon>
              <text style="color: #1b91ff" >{{orderAll.store_mobile}}</text>
            </view>
          </view> -->
    <view class="canState_text">
      <text>加注机</text>
      <text>{{ orderAll.fill_code }}</text>
    </view>
  <!--  <view class="canState_text">
      <text>车牌号</text>
      <text>{{ orderAll.cart_code }}</text>
    </view> -->
    <view class="canState_text">
      <text>消费者</text>
      <text>{{ orderAll.driver_name }}</text>
    </view>
    <view class="canState_text">
      <text>商品名称</text>
      <text>{{ orderAll.product_name }}</text>
    </view>
    <view class="canState_text" v-if="orderAll.goods_list">
      <text>预约福利</text>
      <text>{{ orderAll.goods_list }}</text>
    </view>
    <view class="canState_text" v-if="orderAll.fleet">
      <text>车队</text>
      <text>{{ orderAll.fleet }}</text>
    </view>
    <!-- <view class="canState_text" v-if="orderAll.route">
      <text>路线</text>
      <text>{{ orderAll.route }}</text>
    </view>
    <view class="canState_text" v-if="orderAll.mileage">
      <text>里程</text>
      <text>{{ orderAll.mileage }}</text>
    </view> -->
  </view>
  <view class="canState" style="padding: 20rpx">
    <view class="canState_text" style="padding: 0px">
      <text style="color: #1b91ff">{{ orderAll.fill_status_text }}</text>
    </view>
  </view>
  <!-- 订单金额 -->
  <view class="canState">
    <view class="canState_text">
      <text>实际加注量</text>
      <text>{{ orderAll.fill_amount }}公斤</text>
    </view>
    <view class="canState_text" v-if="orderAll.order_type !== 'customers_filling'">
      <text>实付</text>
      <text>￥{{ orderAll.pay_fee }}</text>
    </view>
    <!-- v-if="orderAll.order_type !== 'customers_filling'" -->
    <view class="canState_text">
      <text>消费金额</text>
      <view class="canState" @click="orderAll.pay_list.length > 0 ? ConsumptionTab() : ''">
        <text>￥{{ orderAll.fill_fee }}</text>
        <uni-icons
          :type="Consumption ? 'top' : 'bottom'"
          size="22"
          color="#666"
          v-if="orderAll.pay_list && orderAll.pay_list.length > 0"
        ></uni-icons>
      </view>
    </view>
    <view class="canState_text" v-for="(item, index) in orderAll.pay_list" :key="index" v-if="Consumption">
      <text style="color: #1b91ff">{{ item.name }}</text>
      <text style="color: #1b91ff">￥{{ item.money }}</text>
    </view>
    <view class="canState_text" v-if="orderAll.order_type !== 'customers_filling'">
      <text>退款</text>
      <text>￥{{ orderAll.tui_fee }}</text>
    </view>
  </view>
  <!-- 本单获得积分 -->
  <view class="canState" v-if="orderAll.order_type !== 'customers_filling'">
    <view class="canState_text">
      <text>积分</text>
      <text>{{ orderAll.score }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { fillingOrders } from '@/gql/filling';
import { getDriverID } from '@/stores/driverID';
import { copyText } from '@/utils/copyText';
import { navBack } from '@/utils/navigator';
import { onLoad } from '@dcloudio/uni-app';
import environment from '@c/pobulic/environment.vue';
import { toPublish } from '@mqtt';
import { ref } from 'vue';
/**
 * 加注订单详情页面
 * @param Consumption  消费金额折叠状态
 * @param driver_id  用户ID
 * @param orderId  订单ID
 * @param orderAll  订单详细信息
 * @param orderAll.order_sn  订单号
 * @param orderAll.type  加注方式
 * @param orderAll.amount  加注量
 * @param orderAll.createtime  下单时间
 * @param orderAll.address  位置
 * @param orderAll.fill_code  加注机
 * @param orderAll.fill_amount  实际加注量
 * @param orderAll.fill_fee  消费金额
 * @param orderAll.cart_code  车牌号
 * @param orderAll.driver_name  消费者
 * @param orderAll.product_name  商品名称
 * @param orderAll.order_type  加注状态
 * @param orderAll.tui_fee  退费
 * @param orderAll.pay_fee  实付
 * @param orderAll.score  积分
 * @param orderAll.fill_status_text  加注机状态
 * @param orderAll.fleet  车队
 * @param orderAll.route  路线
 * @param orderAll.mileage  里程
 * @param orderAll.goods_list  预约福利
 */
//消费金额
const Consumption = ref(false);
// static
const driver_id = getDriverID();
let orderId = null as number;
let orderAll = ref({
  order_sn: '',
  type: '',
  amount: '',
  createtime: '',
  address: '',
  fill_code: '',
  fill_amount: '',
  fill_fee: '',
  cart_code: '',
  driver_name: '',
  product_name: '',
  order_type: '',
  tui_fee: '',
  pay_fee: '',
  score: '',
  fill_status_text: '',
  fleet: '',
  route: '',
  mileage: '',
  goods_list: '',
});
/**
 * 初始化加注订单信息
 * @param driver_id  用户ID
 * @param order_id  订单ID
 * @param orderAll  订单全部信息
 */
function init() {
  const payload = {
    query: fillingOrders,
    variables: {
      order_id: orderId,
      driver_id,
    },
  };
  toPublish('ql/driver/getOrderInfo', payload, (obj: any) => {
    const { fill_order } = obj.data;
    orderAll.value = fill_order;
  });
}
/**
 * 金额折叠面板
 */
function ConsumptionTab() {
  Consumption.value = !Consumption.value;
}
onLoad((options) => {
  orderId = Number.parseInt(options.id);
  init();
});
</script>

<style scoped lang="less">
@import url('../order/less/orderDetail.less');
</style>
